<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>双飞翼布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #right{width:200px;height:500px;background-color: greenyellow;}
    #left{width:200px;height:500px;background-color: blue;}
    #center{width:100%;}

    /* 第1步: float 让三个水平排列 */
    #left,#center,#right{float:left}

    /* 第2步: 给中间的容器的子容器设置margin外间距 => left和right 的位置给留出来*/
    #inner{margin:0 200px;height:500px;background-color: purple;}

    /* 第3步: 把left移动到原本的位置  -  left 在center（100%）的前面
              把right移动到原本的位置 -  right 在center的后面
       技巧: margin负值  -  移动  
    */
    #left{margin-left:-100%}
    #right{margin-left:-200px;}


  /* 总结：
     双飞翼把圣杯的定位位移的属性给优化掉了  margin + padding
  */
  </style>
</head>

<body>

  <div id="parent">
    <div id="center">
      <div id="inner">中间</div>
    </div>
    <div id="left">左边</div>
    <div id="right">右边</div>
  </div>
</body>

</html>